<template>
    <div>
        <div class="user-top" @click="showPopup">
            <div>
                <img :src="avatar" alt="">
            </div>
            <p>{{nickname}}</p>
            <span><van-icon :name="logicon" @click="isshowLogout" /></span>
        </div>
        <van-grid square column-num=3> 
        <van-grid-item  icon="label-o" text="我的订单" />
        <van-grid-item  icon="bill-o" text="优惠券" />
        <van-grid-item  icon="goods-collect-o" text="礼品卡" />
        <van-grid-item  icon="location-o" text="我的收藏" />
        <van-grid-item  icon="flag-o" text="我的足迹" />
        <van-grid-item  icon="contact" text="会员福利" />
        <van-grid-item  icon="aim" text="地址管理" />
        <van-grid-item  icon="warn-o" text="账号安全" />
        <van-grid-item  icon="service-o" text="联系客服" />
        <van-grid-item  icon="question-o" text="帮助中心" />
        <van-grid-item  icon="smile-comment-o" text="意见反馈" />
        </van-grid>
            
            <!-- 登录框 -->
        <van-popup v-model="showLogin">
            <van-form @submit="onSubmit">
            <van-field
                v-model="username"
                name="用户名"
                label="用户名"
                placeholder="用户名"
                :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
                v-model="password"
                type="password"
                name="密码"
                label="密码"
                placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]"
            />
            <div style="margin: 16px;">
                <van-button round block type="danger" native-type="submit">提交</van-button>
            </div>
            </van-form>
        </van-popup>

        <!-- 退出框 -->
        <van-dialog v-model="showLogout" title="确认框" show-cancel-button @confirm="logout">
            <p>确定退出登录吗?</p>
        </van-dialog>
    </div>
</template>

<script>
import img01 from "@/assets/images/下载.png"
import {getloginByWeb} from "@/request/api"
import {mapState,mapMutations} from "vuex"
export default {
    data () {
        return {
            showLogin:false,
            showLogout:false,
            username: '',
            password: '',
            avatar:img01,
            nickname:"点击登录",
            logicon:"arrow"
        }
    },
    created(){
        // 页面刷新时读取本地信息
        let token = localStorage.getItem("token")
        if(token){
            let userInfo=JSON.parse(localStorage.getItem("userInfo"))
            this.avatar=userInfo.avatar
            this.nickname=userInfo.nickname
            this.logicon="cross"
        }
    },
    computed:{
        ...mapState({
            isGoBack:state=>state.isGoBack.isGoBack
        })
    },
    methods: {
        ...mapMutations({
            chanBack:"isGoBack/chanBack"
        }),
        showPopup() {
            // 没有登录才展示登录框,有登录就直接return
            let token = localStorage.getItem("token")
            if(token)return;

            this.showLogin = true;
        },
        isshowLogout(){
            // 退出登录框
            let token = localStorage.getItem("token")
            if(!token)return;

            this.showLogout=true
        },
        logout(){
            // 确定退出登录,删除token,改回默认值
            localStorage.removeItem("token")
            localStorage.removeItem("userInfo")

            this.avatar=img01
            this.nickname="点击登录"
            this.logicon="arrow"
        },
        onSubmit(values) {
            // console.log('submit', values);
            getloginByWeb({
                username:values["用户名"],
                pwd:values["密码"],
            }).then(res=>{
                // 1.提示登录成功  2.保存token和用户信息  3.关闭弹出框  4.渲染页面
                this.$toast('登录成功');
                localStorage.setItem("token",res.data.token)
                localStorage.setItem("userInfo",JSON.stringify(res.data.userInfo))
                setTimeout(() => {
                    this.showLogin = false;
                    this.avatar=res.data.userInfo.avatar
                    this.nickname=res.data.userInfo.nickname
                    this.logicon="cross"

                    // 当用户被强制登录时,登录完成后跳转会之前的页面,提高用户体验
                    // 一开始设置为false,登录完再改回true
                    // if(是不是强制跳转过来的)
                    if(this.isGoBack){
                        this.$router.go(-1)
                        this.chanBack(false)
                    }
                }, 500);
            })
            
        },
    },
}
</script>
 
<style lang = "less" scoped>
    .user-top{
        height: 110px;
        width: 100%;
        line-height: 110px;
        background-color: #333;
        display: flex;
        color: white;
        div{
            width: 70px;
            padding: 0 10px;
            img{
                width: 100%;
                border-radius: 50%;
                transform: translateY(25%);
            }
        }
        p{
            flex: 1;
            padding: 0 10px;
        }
        span{
            width: 20px;
            padding: 0 10px;
        }
    }
    .van-popup{
        width: 90%;
        height: 240px;
        .van-form{
            margin-top: 40px;
        }
    }
    .van-dialog{
        p{
            text-align: center;
            padding: 20px 0;
        }
    }
</style>